<template>
    <!-- ******************************************************* -->
    <!-- 查询条件区域 -->
    <!-- ******************************************************* -->
    <div style="text-align:left">

        <el-form :inline="true" :model="queryParm">

            <el-form-item label="角色名">
                <el-input v-model="queryParm.NAME" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onQuery">
                    <el-icon style="margin-right: 6px;">
                        <Search />
                    </el-icon>
                    {{ $t('common.query') }}
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- ******************************************************* -->
    <!-- 数据列表区域 -->
    <!-- ******************************************************* -->
    <div class="dataArea">
        <el-table :data="tableData" height="100%" highlight-current-row @current-change="handleTableSelectRow"
            @selection-change="handleSelectionChange"
            style="width: 100%; font-size: 12px; border-radius: 4px; border: 1px solid #eee" :header-cell-style="{
                background: '#fafafa',
                color: '#333',
                fontWeight: '600',
                fontSize: '14px'
            }">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />

            <el-table-column prop="NAME" label="角色名" width="180" />
            <el-table-column prop="REMARK" label="说明" />
        </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElTable } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps(['userId'])

onMounted(() => {
    onQuery();
})

// ========================================================================
// 处理列表查询相关代码
// ========================================================================
let queryParm = reactive({
    ID: '',
    NAME: '',
    REMARK: '',
})

const currentPage = ref(1);  // 当前页
const pageSize = ref(5);     // 每页记录条数
const totalRow = ref(0);     // 总行数（查询接口将返回）

const isSelectedRow = ref(false);  // 是否选择了一行数据
let currentSelectRow = reactive({});  // 当前选中行的数据[-1：未选择行]

let tableData = reactive([])
// 每页显示数量【下拉列表，若显示则有】变化，触发事件
function handleSizeChange(value: number) {
    currentPage.value = 1;
    pageSize.value = value;
    onQuery();
}

// 切换当前页触发事件
function handleCurrentChange(value: number) {
    currentPage.value = value;
    onQuery();
}

// 查询数据
function onQuery() {
    var inParm = {
        USER_ID: props.userId
    };

    console.log(inParm)

    axios.post("/api/system/user/role/addList", inParm).then(res => {
        if (res.data.code == "200") {
            //请添加执行成功后的业务代码 
            if (res.data != null && res.data.success) {

                //清空数组
                isSelectedRow.value = false;
                currentSelectRow = {};  // 清空当前选中行
                tableData.length = 0;

                for (var i = 0; i < res.data.data.roles.length; i++) {
                    tableData.push(res.data.data.roles[i]);
                }
            }
        } else {
            // 错误消息为：res.data.msg 
            // 请添加执行失败后的业务代码 
            ElMessage.error(res.data.msg)
        }
    });
}

/**
 *  选中一行
 * */
const handleTableSelectRow = (currentRow: any, oldCurrentRow: any) => {
    isSelectedRow.value = true;
    currentSelectRow = currentRow;
}

const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}


const confirm = (successCallback) => {
    // 保存选中的角色【传入一个List】

    var roles = [];
    for(var i = 0 ; i < multipleSelection.value.length ; i++){
        roles.push( {'roleId' : multipleSelection.value[i].ID} );
    }

    axios.post("/api/system/user/roles/add",
        {
            'userId': props.userId ,
            'roles': roles
        }).then(res => {
            if (res.data.code == "200") {
                //请添加执行成功后的业务代码 
                ElMessage.success('角色添加成功')
                successCallback();
            } else {
                // 错误消息为：res.data.msg 
                // 请添加执行失败后的业务代码 
                ElMessage.error(res.data.msg)
            }
        });

}


defineExpose({ confirm })
</script>
  
<style>
.dataArea {
    height: calc(100vh - 280px);
}

.paginationArea {
    margin-top: 8px;
    float: right;
}
</style>
  